/**
 * WMS组件样式
 * 定义WMS系统中通用组件的样式
 */

// ArtTable组件样式
.art-table {
  .el-table {
    border: 1px solid var(--wms-border-color-light);
    border-radius: var(--wms-border-radius-lg);
    overflow: hidden;
    
    .el-table__header-wrapper {
      .el-table__header {
        .el-table__cell {
          background: var(--wms-fill-color-lighter);
          color: var(--wms-color-text-regular);
          font-weight: var(--wms-font-weight-semibold);
          border-bottom: 1px solid var(--wms-border-color-light);
          
          .cell {
            padding: 0 var(--wms-spacing-lg);
            line-height: var(--wms-table-header-height);
          }
        }
      }
    }
    
    .el-table__body-wrapper {
      .el-table__body {
        .el-table__row {
          transition: var(--wms-transition-all);
          
          &:hover {
            background: var(--wms-fill-color-extra-light);
          }
          
          .el-table__cell {
            border-bottom: 1px solid var(--wms-border-color-lighter);
            
            .cell {
              padding: 0 var(--wms-spacing-lg);
              line-height: var(--wms-table-row-height);
            }
          }
        }
      }
    }
    
    .el-table__empty-block {
      background: var(--wms-fill-color-blank);
      
      .el-table__empty-text {
        color: var(--wms-color-text-secondary);
      }
    }
  }
}

// ArtTableHeader组件样式
.art-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wms-spacing-lg) var(--wms-spacing-xl);
  background: var(--wms-fill-color-blank);
  border: 1px solid var(--wms-border-color-light);
  border-bottom: none;
  border-radius: var(--wms-border-radius-lg) var(--wms-border-radius-lg) 0 0;
  
  .art-table-title {
    display: flex;
    align-items: center;
    gap: var(--wms-spacing-sm);
    
    .title-text {
      font-size: var(--wms-font-size-lg);
      font-weight: var(--wms-font-weight-semibold);
      color: var(--wms-color-text-primary);
    }
    
    .title-count {
      padding: 2px 6px;
      background: var(--wms-color-primary);
      color: #fff;
      font-size: var(--wms-font-size-xs);
      border-radius: var(--wms-border-radius-sm);
    }
  }
  
  .art-table-actions {
    display: flex;
    align-items: center;
    gap: var(--wms-spacing-sm);
    
    .search-section {
      margin-right: var(--wms-spacing-lg);
    }
    
    .action-buttons {
      display: flex;
      gap: var(--wms-spacing-sm);
    }
  }
}

// WMS搜索组件样式
.wms-search {
  .el-form {
    .el-form-item {
      margin-bottom: var(--wms-spacing-lg);
      
      .el-form-item__label {
        color: var(--wms-color-text-regular);
        font-weight: var(--wms-font-weight-medium);
      }
      
      .el-form-item__content {
        .el-input,
        .el-select,
        .el-date-picker {
          width: 100%;
        }
        
        .el-input__wrapper {
          border-radius: var(--wms-border-radius-md);
          transition: var(--wms-transition-all);
          
          &:hover {
            border-color: var(--wms-color-primary);
          }
          
          &.is-focus {
            border-color: var(--wms-color-primary);
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          }
        }
      }
    }
    
    .search-actions {
      display: flex;
      justify-content: center;
      gap: var(--wms-spacing-md);
      margin-top: var(--wms-spacing-xl);
    }
  }
}

// WMS对话框组件样式
.wms-dialog {
  .el-dialog {
    border-radius: var(--wms-border-radius-lg);
    box-shadow: var(--wms-box-shadow-dark);
    
    .el-dialog__header {
      padding: var(--wms-spacing-xl);
      border-bottom: 1px solid var(--wms-border-color-light);
      background: var(--wms-fill-color-lighter);
      
      .el-dialog__title {
        font-size: var(--wms-font-size-xl);
        font-weight: var(--wms-font-weight-semibold);
        color: var(--wms-color-text-primary);
      }
      
      .el-dialog__headerbtn {
        top: var(--wms-spacing-lg);
        right: var(--wms-spacing-lg);
        
        .el-dialog__close {
          color: var(--wms-color-text-secondary);
          font-size: var(--wms-font-size-lg);
          
          &:hover {
            color: var(--wms-color-primary);
          }
        }
      }
    }
    
    .el-dialog__body {
      padding: var(--wms-spacing-xl);
      background: var(--wms-fill-color-blank);
    }
    
    .el-dialog__footer {
      padding: var(--wms-spacing-lg) var(--wms-spacing-xl);
      border-top: 1px solid var(--wms-border-color-light);
      background: var(--wms-fill-color-lighter);
      text-align: center;
      
      .dialog-footer {
        display: flex;
        justify-content: center;
        gap: var(--wms-spacing-md);
      }
    }
  }
}

// WMS状态标签组件样式
.wms-status-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--wms-border-radius-sm);
  font-size: var(--wms-font-size-xs);
  font-weight: var(--wms-font-weight-medium);
  line-height: 1;
  
  &.status-success {
    background: var(--wms-color-success-light-9);
    color: var(--wms-color-success);
    border: 1px solid var(--wms-color-success-light-7);
  }
  
  &.status-warning {
    background: var(--wms-color-warning-light-9);
    color: var(--wms-color-warning);
    border: 1px solid var(--wms-color-warning-light-7);
  }
  
  &.status-danger {
    background: var(--wms-color-danger-light-9);
    color: var(--wms-color-danger);
    border: 1px solid var(--wms-color-danger-light-7);
  }
  
  &.status-info {
    background: var(--wms-color-info-light-9);
    color: var(--wms-color-info);
    border: 1px solid var(--wms-color-info-light-7);
  }
  
  &.status-primary {
    background: var(--wms-color-primary-light-9);
    color: var(--wms-color-primary);
    border: 1px solid var(--wms-color-primary-light-7);
  }
}

// WMS工具栏组件样式
.wms-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wms-spacing-md) var(--wms-spacing-lg);
  background: var(--wms-fill-color-lighter);
  border: 1px solid var(--wms-border-color-light);
  border-radius: var(--wms-border-radius-md);
  margin-bottom: var(--wms-spacing-lg);
  
  .toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--wms-spacing-md);
    
    .toolbar-title {
      font-size: var(--wms-font-size-md);
      font-weight: var(--wms-font-weight-medium);
      color: var(--wms-color-text-primary);
    }
    
    .toolbar-info {
      font-size: var(--wms-font-size-sm);
      color: var(--wms-color-text-secondary);
    }
  }
  
  .toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--wms-spacing-sm);
  }
}

// WMS分页组件样式
.wms-pagination {
  display: flex;
  justify-content: center;
  padding: var(--wms-spacing-xl);
  background: var(--wms-fill-color-blank);
  border: 1px solid var(--wms-border-color-light);
  border-top: none;
  border-radius: 0 0 var(--wms-border-radius-lg) var(--wms-border-radius-lg);
  
  .el-pagination {
    .el-pagination__total {
      color: var(--wms-color-text-secondary);
    }
    
    .el-pager {
      .number {
        border-radius: var(--wms-border-radius-sm);
        transition: var(--wms-transition-all);
        
        &:hover {
          background: var(--wms-color-primary-light-9);
          color: var(--wms-color-primary);
        }
        
        &.is-active {
          background: var(--wms-color-primary);
          color: #fff;
        }
      }
    }
    
    .btn-prev,
    .btn-next {
      border-radius: var(--wms-border-radius-sm);
      transition: var(--wms-transition-all);
      
      &:hover {
        background: var(--wms-color-primary-light-9);
        color: var(--wms-color-primary);
      }
    }
  }
}

// WMS加载组件样式
.wms-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--wms-spacing-xxl) var(--wms-spacing-xl);
  color: var(--wms-color-text-secondary);
  
  .loading-icon {
    font-size: 32px;
    margin-bottom: var(--wms-spacing-md);
    color: var(--wms-color-primary);
    animation: wms-spin 1s linear infinite;
  }
  
  .loading-text {
    font-size: var(--wms-font-size-md);
  }
}

// WMS空状态组件样式
.wms-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--wms-spacing-xxl) var(--wms-spacing-xl);
  color: var(--wms-color-text-secondary);
  
  .empty-icon {
    font-size: 48px;
    margin-bottom: var(--wms-spacing-lg);
    color: var(--wms-color-text-placeholder);
  }
  
  .empty-text {
    font-size: var(--wms-font-size-md);
    margin-bottom: var(--wms-spacing-lg);
  }
  
  .empty-action {
    .el-button {
      padding: var(--wms-spacing-sm) var(--wms-spacing-lg);
    }
  }
}

// WMS面包屑组件样式
.wms-breadcrumb {
  padding: var(--wms-spacing-lg) 0;
  
  .el-breadcrumb {
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        color: var(--wms-color-text-secondary);
        font-weight: var(--wms-font-weight-normal);
        
        &:hover {
          color: var(--wms-color-primary);
        }
        
        &.is-link {
          color: var(--wms-color-primary);
        }
      }
      
      .el-breadcrumb__separator {
        color: var(--wms-color-text-placeholder);
      }
      
      &:last-child {
        .el-breadcrumb__inner {
          color: var(--wms-color-text-primary);
          font-weight: var(--wms-font-weight-medium);
        }
      }
    }
  }
}

// WMS标签页组件样式
.wms-tabs {
  .el-tabs {
    .el-tabs__header {
      margin: 0;
      border-bottom: 1px solid var(--wms-border-color-light);
      
      .el-tabs__nav-wrap {
        .el-tabs__nav {
          .el-tabs__item {
            padding: var(--wms-spacing-lg) var(--wms-spacing-xl);
            color: var(--wms-color-text-secondary);
            font-weight: var(--wms-font-weight-medium);
            border-bottom: 2px solid transparent;
            transition: var(--wms-transition-all);
            
            &:hover {
              color: var(--wms-color-primary);
            }
            
            &.is-active {
              color: var(--wms-color-primary);
              border-bottom-color: var(--wms-color-primary);
            }
          }
        }
      }
    }
    
    .el-tabs__content {
      padding: var(--wms-spacing-xl);
    }
  }
}
